<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>数据统计</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script src="../plugins/echarts.js"></script>
		<script src="../plugins/iconfont.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.my-el-col {
				width: 33.2%;
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}

			.box-card {
				width: 80%;
				margin-left: 40px;
			}

			.clearfix {
				text-align: center;
				font-size: 15px;
			}

			.text {
				text-align: center;
				font-size: 24px;
				font-weight: 700;
				vertical-align: super;
			}

			#main {
				width: 100%;
				height: 450px;
				margin-top: 20px;
			}

			.icon {
				width: 50px;
				height: 50px;
				padding-top: 5px;
				padding-right: 10px;
			}
		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="admin.html" style="color: rgb(32, 155, 159);">{{ adminName }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-s-data"></i>数据统计</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-user-solid"></i>管理员管理</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-user"></i>用户管理</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-collection"></i>图书管理</el-menu-item>
						<el-menu-item index="5" class="el-menu-item" @click="load5()" style="border-right: none;"><i class="el-icon-tickets"></i>借阅管理</el-menu-item>
						<el-menu-item index="6" class="el-menu-item" @click="load6()" style="border-right: none;"><i class="el-icon-tickets"></i>公告管理</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<el-row :gutter="20" margin-left="20px">
						<el-col class="my-el-col" :span="6" v-for="item in cards" :key="item.title">
							<el-card class="box-card">
								<div slot="header" class="clearfix">{{ item.title }}</div>
								<div class="text item">
									<svg class="icon" aria-hidden="true">
										<use :xlink:href="item.icon" style="width: 100px"></use>
									</svg>
									<span class="text">{{ item.data }}</span>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<!--					<div id="myTimer" style="margin-left: 15px;font-weight: 550;"></div>-->
					<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
					<div id="main" style="margin-left: 5px"></div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		axios.defaults.withCredentials = true //携带cookie
		var vue = new Vue({
			el: '#app',
			data: {
				adminName: '',
				cards: [{
					title: '总借阅',
					data: 100,
					icon: '#iconlend-record-pro'
				}, {
					title: '图书数',
					data: 100,
					icon: '#iconbook-pro'
				}, {
					title: '用户数',
					data: 100,
					icon: '#iconpopulation'
				}],
				data: {}
			},

			created() {
				this.adminName = localStorage.getItem("adminName");
				if(localStorage.getItem("adminName") == null){
					alert('请先登录!!!');
					window.location.href = "../index.html";
				}
				this.mounted();
				this.$message.success("欢迎管理员" + this.adminName);
			},

			methods: {
				// 退出登录
				logout() {
					localStorage.removeItem("adminName");
					localStorage.removeItem("password");
					window.location.href = "../index.html";
				},
				// 网页跳转
				load1(){
					window.location.href="statistics.html";
				},
				load2(){
					window.location.href="admin.html";
				},
				load3(){
					window.location.href="users.html";
				},
				load4(){
					window.location.href="books.html";
				},
				load5(){
					window.location.href="lentRecord.html";
				},
				load6(){
					window.location.href="notice.html";
				},

				mounted() {
					this.circleTimer()
					axios.get("/statistics").then((res) => {
						if (res.data.code == 20041) {
							console.log(res.data.code);
							this.cards[0].data = res.data.data[0];
							this.cards[1].data = res.data.data[1];
							this.cards[2].data = res.data.data[2];
						} else {
							this.$message.error(res.data.msg);
						}

						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('main'))
						console.log(this.cards[0].data)
						// 绘制图表
						myChart.setOption({
							title: {
								text: '统计'
							},
							tooltip: {
								trigger: 'axis'
								// axisPointer: {
								//   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								// }
							},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								data: this.cards.map(item => item.title),
								axisTick: {
									alignWithLabel: true
								}
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								type: 'bar',
								label: {
									show: true
								},
								barWidth: '35%',
								data: [{
									value: this.cards[0].data,
									itemStyle: {
										color: '#5470c6'
									}
								}, {
									value: this.cards[1].data,
									itemStyle: {
										color: '#fac858'
									}
								}, {
									value: this.cards[2].data,
									itemStyle: {
										color: '#ee6666'
									}
								}]
							}]
						})
						window.addEventListener('resize', () => {
							myChart.resize()
						})
					})
				},
				circleTimer() {
					this.getTimer()
					setInterval(() => {
						this.getTimer()
					}, 1000)
				},
				getTimer() {
					var d = new Date()
					var t = d.toLocaleString()
					// document.getElementById('myTimer').innerHTML = t
				}
			}

		})
	</script>
	<style>

	</style>

</html>